<template>
    <div class="image-list">
        <ul>
            <li
              v-for="url in state.images"
              :key="url"
              @click="handleClick(url)"
            >
                <img :class="state.currImage === url ? 'is-selected' : ''" :src="url" />
            </li>
        </ul>
    </div>
</template>

<script setup>
    import {useStore} from 'vuex';
    const {state, commit} = useStore();

    const handleClick = url => {
      commit('changeImage', url);
    };

</script>

<style lang="scss" scoped>
.image-list {
  height: 610px;
  box-sizing: border-box;
  padding: 4px 8px 4px 2px;
  overflow-y: scroll;
  position: relative;
  user-select: none;
  ul{
    padding: 0;
    margin: 0;
    img{
      width: 100%;
      border: 2px solid transparent;
      transition: all .2s ease-in-out;
      &.is-selected{
        border-color: $blue-0;
      }
      &:hover{
        border-color: $blue-0;
      }
    }
  }
}
</style>